﻿@page "/docs/extensions/pdfviewer"

<Seo Canonical="/docs/extensions/pdfviewer" Title="Blazorise PdfViewer Component" Description="Learn to use and work with the Blazorise PdfViewer component, a component used to display regular PDF documents." />

<DocsPageTitle Path="Extensions/PdfViewer" AddedVersion="Added in v1.7">
    Blazorise PdfViewer Component
</DocsPageTitle>

<DocsPageLead>
    A <Code>PdfViewer</Code> component used to display regular PDF documents.
</DocsPageLead>

<DocsPageSubtitle>
    Overview
</DocsPageSubtitle>

<DocsPageParagraph>
    The PdfViewer component in Blazorise allows users to display and navigate PDF documents directly within a Blazor application, supporting features like zoom, page navigation, and printing.
</DocsPageParagraph>

<DocsPageSubtitle>
    Structure
</DocsPageSubtitle>

<DocsPageParagraph>
    <UnorderedList>
        <UnorderedListItem>
            <Code Tag>PdfViewerContainer</Code>: Acts as the main container for both the toolbar and the PDF viewer. It ensures proper layout and scrolling if needed.
        </UnorderedListItem>
        <UnorderedListItem>
            <Code Tag>PdfViewerToolbar</Code>: A toolbar component is included within the container.
        </UnorderedListItem>
        <UnorderedListItem>
            <Code Tag>PdfViewer</Code>: The main component for displaying the PDF document.
        </UnorderedListItem>
    </UnorderedList>
</DocsPageParagraph>

<DocsPageSubtitle>
    Installation
</DocsPageSubtitle>

<DocsPageSection>
    <DocsPageSectionHeader Title="NuGet">
        Install extension from NuGet.
    </DocsPageSectionHeader>
    <DocsPageSectionSource Code="PdfViewerNugetInstallExample" />
</DocsPageSection>

<DocsPageSection>
    <DocsPageSectionHeader Title="Imports">
        In your main <Badge Color="Color.Light">_Imports.razor</Badge> add:
    </DocsPageSectionHeader>
    <DocsPageSectionSource Code="ImportPdfViewerExample" />
</DocsPageSection>

<DocsPageSubtitle>
    Examples
</DocsPageSubtitle>

<DocsPageSection>
    <DocsPageSectionHeader Title="Basic">
        This example demonstrates how to use the PdfViewer component to display a PDF document within your application. The <Code>Source</Code> attribute is set to the URL of the PDF you want to render.
    </DocsPageSectionHeader>
    <DocsPageSectionContent Outlined FullWidth>
        <PdfViewerBasicExample />
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="PdfViewerBasicExample" />
</DocsPageSection>

<DocsPageSection>
    <DocsPageSectionHeader Title="Base64 String">
        You can also load a PDF document using a base64 string. This example shows how to use the PdfViewer component to display a PDF document from a base64 string.
    </DocsPageSectionHeader>
    <DocsPageSectionContent Outlined FullWidth>
        <PdfViewerBase64Example />
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="PdfViewerBase64Example" />
</DocsPageSection>

<DocsPageSection>
    <DocsPageSectionHeader Title="With Navigation">
        This example demonstrates how to integrate the PdfViewer component with navigation buttons in a Blazor application. The PdfViewer is set up to display a PDF document, while the buttons allow for page navigation.
    </DocsPageSectionHeader>
    <DocsPageSectionContent Outlined FullWidth>
        <PdfViewerPagingExample />
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="PdfViewerPagingExample" />
</DocsPageSection>

<DocsPageSection>
    <DocsPageSectionHeader Title="With Toolbar">
        <Paragraph>
            This example illustrates how to use the <Strong>PdfViewerContainer</Strong> to integrate both a toolbar and a viewer component for displaying and interacting with a PDF document.
        </Paragraph>
        <Paragraph>
            <UnorderedList>
                <UnorderedListItem>
                    <Strong>PdfViewerContainer</Strong>: Acts as the main container for both the toolbar and the PDF viewer. It ensures proper layout and scrolling if needed.
                </UnorderedListItem>
                <UnorderedListItem>
                    <Strong>PdfViewerToolbar</Strong>: A toolbar component is included within the container. This toolbar typically provides controls for interacting with the PDF, such as navigation and scaling.
                </UnorderedListItem>
                <UnorderedListItem>
                    <Strong>PdfViewer</Strong>: The main component for displaying the PDF document. It is configured with the Source attribute to load a sample PDF from the provided URL.
                </UnorderedListItem>
            </UnorderedList>
        </Paragraph>
        <Paragraph>
            <Strong>Note:</Strong> The <Strong>PdfViewer</Strong> component can function independently of the <Strong>PdfViewerToolbar</Strong> if needed, directly rendering the specified PDF document. However, when used together in this setup, they offer a complete solution for PDF viewing and interaction.
        </Paragraph>
    </DocsPageSectionHeader>
    <DocsPageSectionContent Outlined FullWidth>
        <PdfViewerToolbarExample />
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="PdfViewerToolbarExample" />
</DocsPageSection>

<PdfViewerApi />